    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
        <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
        <%@include file="../common/header.jsp"%>
            <div class="easyui-layout" data-options="fit:true">
            <!-- Begin of toolbar -->
            <div id="wu-toolbar">
            <div class="wu-toolbar-button">
        <%@include file="../common/menus.jsp"%>
<%--            <a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="openAdd()" plain="true">添加</a>--%>
<%--            <a href="#" class="easyui-linkbutton" iconCls="icon-edit" onclick="openEdit()" plain="true">修改</a>--%>
<%--            <a href="#" class="easyui-linkbutton" iconCls="icon-remove" onclick="remove()" plain="true">删除</a>--%>
<%--            <a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="openAddButton()" plain="true">添加按钮</a>--%>

        </div>
            <div class="wu-toolbar-search">

            <label>菜单名称：</label><input  id="search-name" class="wu-text" style="width:100px">
            <a href="#" id="search-btn" class="easyui-linkbutton" iconCls="icon-search">搜索</a>
            </div>
            </div>
            <!-- End of toolbar -->
            <%-- 列表显示       --%>
            <table id="data-datagrid" class="easyui-treegrid" toolbar="#wu-toolbar"></table>
            </div>
        <style>
        .selected{
        background:red;
        }
        </style>
            <!-- Begin of easyui-dialog -->
        <%-- 添加页面       --%>
        <div id="add-dialog" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'" style="width:400px; padding:10px;">
        <form id="add-form" method="post">
        <table>
        <tr>
        <td width="60" align="right">菜单名称:</td>
        <td><input type="text" name="name" class="wu-text" /></td>
        </tr>
        <tr>
        <td align="right">上级菜单:</td>
        <td>
        <select class="easyui-combobox" name="parentId" panelHeight="auto" style="width:268px">
        <option value="0">顶级分类</option>
        <c:forEach items="${topList}" var="menu">
            <option value="${menu.id}">${menu.name}</option>
        </c:forEach>
        </select>
        </td>
        </tr>
        <tr>
        <td align="right">菜单URL:</td>
        <td><input type="text" name="url" class="wu-text" /></td>
        </tr>
        <tr>
        <td valign="top" align="right">菜单图标:</td>
        <td>
        <input type="text" id="add-icon" name="icon" class="wu-text" />
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="selectIcon()" plain="true">选择</a>
        </td>
        </tr>
        </table>
        </form>
        </div>
        <%-- 修改页面       --%>
        <div id="edit-dialog" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'" style="width:400px; padding:10px;">
        <form id="edit-form" method="post">
        <input type="hidden" id="edit-id" name="id">
        <table>
        <tr>
        <td width="60" align="right">菜单名称:</td>
        <td><input type="text" id="edit-name" name="name" class="wu-text" /></td>
        </tr>
        <tr>
        <td align="right">上级菜单:</td>
        <td>
        <select class="easyui-combobox" id="edit-parentId" name="parentId" panelHeight="auto" style="width:268px">
        <option value="0">顶级分类</option>
        <c:forEach items="${topList}" var="menu">
            <option value="${menu.id}">${menu.name}</option>
        </c:forEach>
        </select>
        </td>
        </tr>
        <tr>
        <td align="right">菜单URL:</td>
        <td><input type="text" id="edit-url" name="url" class="wu-text" /></td>
        </tr>
        <tr>
        <td valign="top" align="right">菜单图标:</td>
        <td>
        <input type="text" id="edit-icon" name="icon" class="wu-text" />
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="selectIcon()" plain="true">选择</a>
        </td>
        </tr>
        </table>
        </form>
        </div>
        <%-- 添加按钮页面       --%>
        <div id="addButton-dialog" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'" style="width:400px; padding:10px;">
        <form id="addButton-form" method="post">
        <table>
        <tr>
        <td width="60" align="right">按钮名称:</td>
        <td><input type="text" name="name" class="wu-text" /></td>
        </tr>
        <tr>
        <td align="right">上级菜单:</td>
        <td>
        <input type="hidden" name="parentId" id="addButton-parent-id">
        <input type="text" readonly="readonly" id="parent-menu" class="wu-text easyui-validatebox" />
        </td>
        </tr>
        <tr>
        <td align="right">按钮事件:</td>
        <td><input type="text" name="url" class="wu-text" /></td>
        </tr>
        <tr>
        <td valign="top" align="right">按钮图标:</td>
        <td>
        <input type="text" id="addButton-icon" name="icon" class="wu-text" />
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="selectIcon()" plain="true">选择</a>
        </td>
        </tr>
        </table>
        </form>
        </div>
        <!-- 选择图标弹窗 -->
        <div id="select-icon-dialog" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'" style="width:820px;height:550px; padding:10px;">
        <table id="icons-table" cellspacing="8">

        </table>
        </div>
        <%@include file="../common/footer.jsp"%>
            <!-- End of easyui-dialog -->
            <script type="text/javascript">
            /**
            * Name 添加记录
            */
            function add(){
            var data = $("#add-form").serialize();
            $.ajax({
            url:'../../admin/menu/add',
            dataType:'json',
            type:'post',
            data:data,
            success:function(data){
            if(data.type == 'success'){
            $.messager.alert('信息提示','添加成功！','info');

            $('#add-dialog').dialog('close');
            $('#data-datagrid').treegrid('reload');
            }else{
            $.messager.alert('信息提示',data.msg,'info');
            }
            }
            });
            }
        /**
        * Name 添加按钮记录
        */
        function addButton(){
        var data = $("#addButton-form").serialize();
        $.ajax({
        url:'../../admin/menu/add',
        dataType:'json',
        type:'post',
        data:data,
        success:function(data){
        if(data.type == 'success'){
        $.messager.alert('信息提示','添加成功！','info');

        $('#addButton-dialog').dialog('close');
        $('#data-datagrid').treegrid('reload');
        }else{
        $.messager.alert('信息提示',data.msg,'info');
        }
        }
        });
        }
            //选择图标弹窗
            function selectIcon(){
            if($("#icons-table").children().length <= 0){
            $.ajax({
            url:'../../admin/menu/getIcons',
            dataType: 'json',
            type: 'post',
            success:function(data) {
            if(data.type=='success'){
            var icons = data.content;
            var table = '';
            for(var i=0;i<icons.length;i++){
            var tbody = '<td class="icon-td"><a onclick="selected(this)" href="javascript:void(0)" class="' + icons[i] +
            '">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></td>';
            if(i == 0){
            table += '<tr>' + tbody;
            continue;
            }
            if((i+1)%24 === 0){
            table += tbody + '</tr><tr>';
            continue;
            }
            table += tbody;
            }
            table += '</tr>';
             $("#icons-table").append(table);
            }else {
            $.messager.alert('信息提示',data.msg,'warning');
            }
            }
            });
            }
            $('#select-icon-dialog').dialog({
            closed: false,
            modal:true,
            title: "添加图标",
            buttons: [{
            text: '确定',
            iconCls: 'icon-ok',
            handler: function () {
            var icon = $(".selected a").attr('class');
            $("#add-icon").val(icon);
            $("#edit-icon").val(icon);
            $("#addButton-icon").val(icon);
            $('#select-icon-dialog').dialog('close');
            }
            }, {
            text: '取消',
            iconCls: 'icon-cancel',
            handler: function () {
            $('#select-icon-dialog').dialog('close');
            }
            }]
            });
            }
            function selected(e){
            $(".icon-td").removeClass('selected');
            $(e).parent("td").addClass('selected');

            }


            /**
            * Name 修改记录
            */
            function edit(){
            var data = $("#edit-form").serialize();
            $.ajax({
            url:'../../admin/menu/edit',
            dataType:'json',
            type:'post',
            data:data,
            success:function(data) {
                if(data.type == 'success'){
                    $.messager.alert('信息提示','修改成功！','info');
                    $("#edit-dialog").dialog('close');
                    $("#data-datagrid").treegrid('reload');
        }else {
                   $.messager.alert('提示信息',data.msg,'info');
        }

        }

            });
            }

            /**
            * Name 删除记录
            */
            function remove(){
            $.messager.confirm('信息提示','确定要删除该记录？', function(result){
            if(result){
            var item = $('#data-datagrid').datagrid('getSelected');//获取选中的那一行
            if(item==null||item.length==0){
            $.messager.alert('提示信息','请选择要修改的菜单','info');
            return;
            }
            $.ajax({
            url:'../../admin/menu/deleteMenu',
            dataType:'json',
            type:'post',
            data:{id:item.id},
            success:function(data){
            if(data.type == 'success'){
            $.messager.alert('信息提示','删除成功！','info');
            $('#data-datagrid').treegrid('reload');
            }
            else
            {
            $.messager.alert('信息提示',data.msg,'info');
            }
            }
            });
            }
            });
            }

            /**
            * Name 打开添加窗口
            */
            function openAdd(){
            $('#add-form').form('clear');
            $('#add-dialog').dialog({
            closed: false,
            modal:true,
            title: "添加信息",
            buttons: [{
            text: '确定',
            iconCls: 'icon-ok',
            handler: add
            }, {
            text: '取消',
            iconCls: 'icon-cancel',
            handler: function () {
            $('#add-dialog').dialog('close');
            }
            }]
            });
            }

            /**
            * Name 打开修改窗口
            */
            function openEdit(){
            $('#edit-form').form('clear');
            var item = $('#data-datagrid').datagrid('getSelected');//获取选中的那一行
            if(item==null||item.length==0){
                $.messager.alert('提示信息','请选择要修改的菜单','info');
                return;
        }
            // $.ajax({
            // url:'',
            // data:'',
            // success:function(data){
            // if(data){
            // $('#edit-dialog').dialog('close');
            // }
            // else{
            // //绑定值
            // $('#edit-form').form('load', data)
            // }
            // }
            // });
            $('#edit-dialog').dialog({
            closed: false,
            modal:true,
            title: "修改信息",
            buttons: [{
            text: '确定',
            iconCls: 'icon-ok',
            handler: edit
            }, {
            text: '取消',
            iconCls: 'icon-cancel',
            handler: function () {
            $('#edit-dialog').dialog('close');
            }
            }],
        //打开前执行
            onBeforeOpen:function() {
                $("#edit-id").val(item.id);
                $('#edit-name').val(item.name);
                $('#edit-parentId').combobox('setValue',item.parentId);
                $('#edit-url').val(item.url);
                $('#edit-icon').val(item.icon);

        }
            });
            }

        /**
        * Name 打开添加按钮窗口
        */
        function openAddButton(){
        var item = $('#data-datagrid').treegrid('getSelected');
        if(item == null || item.length == 0){
        $.messager.alert('信息提示','请选择要添加菜单按钮的数据！','info');
        return;
        }
        if(item.parentId == 0){
        $.messager.alert('信息提示','请选择二级菜单！','info');
        return;
        }
        var parent = $('#data-datagrid').treegrid('getParent',item.id);
        if(parent.parentId != 0){
        $.messager.alert('信息提示','请选择二级菜单！','info');
        return;
        }
        $('#addButton-dialog').dialog({
        closed: false,
        modal:true,
        title: "添加按钮信息",
        buttons: [{
        text: '确定',
        iconCls: 'icon-ok',
        handler: addButton
        }, {
        text: '取消',
        iconCls: 'icon-cancel',
        handler: function () {
        $('#addButton-dialog').dialog('close');
        }
        }],
        onBeforeOpen:function(){
        $("#parent-menu").val(item.name);
        $("#addButton-parent-id").val(item.id);
        }
        });
        }

            /**
            * Name 分页过滤器
            */
            function pagerFilter(data){
            if (typeof data.length == 'number' && typeof data.splice == 'function'){// is array
            data = {
            total: data.length,
            rows: data
            }
            }
            var dg = $(this);
            var opts = dg.datagrid('options');
            var pager = dg.datagrid('getPager');
            pager.pagination({
            onSelectPage:function(pageNum, pageSize){
            opts.pageNumber = pageNum;
            opts.pageSize = pageSize;
            pager.pagination('refresh',{pageNumber:pageNum,pageSize:pageSize});
            dg.datagrid('loadData',data);
            }
            });
            if (!data.originalRows){
            data.originalRows = (data.rows);
            }
            var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
            var end = start + parseInt(opts.pageSize);
            data.rows = (data.originalRows.slice(start, end));
            return data;
            }

            //搜索按钮监听
            $("#search-btn").click(function(){
            $('#data-datagrid').treegrid('reload',{
            name:$("#search-name").val()
            });
            });
                /**
                * Name 载入数据
                */
            $('#data-datagrid').treegrid({
            url:'../../admin/menu/list',
            //loadFilter:pagerFilter,
            rownumbers:true,
            singleSelect:true,
            pageSize:20,
            pagination:true,
            multiSort:true,
            fitColumns:true,
            fit:true,
            idField:'id',
            treeField:'name',
            columns:[[
            //{ checkbox:true},
            { field:'name',title:'菜单名称',width:100,sortable:true},
            { field:'url',title:'菜单URL',width:180,sortable:true},
            { field:'icon',title:'表单图标',width:100,formatter:function(value,index,row){//此方法为菜单图标预览
        var test = '<a class="' + value + '">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>'
        return test + value;
        }},
            ]]
            });
            </script>